<template>
	<el-dialog title="权限配置" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
		<el-form label-width="80px" class="menu-permission">
			<el-form-item label="菜单" class="dataJurisdiction_tree">
				<div class="menu-item" v-for="item in webMenu" :key="item.id">
					<p>
						<el-checkbox v-model="item.checked">{{ item.name }}</el-checkbox>
					</p>
					<ul class="second-level">
						<li v-for="v in item.childList" :key="v.id">
							<span>
								<el-checkbox v-model="v.checked">{{ v.name }}</el-checkbox>
							</span>
							<div class="three-level" v-if="v.childList.length">
								<span v-for="k in v.childList" :key="k.id">
									<el-checkbox v-model="k.checked">{{ k.name }}</el-checkbox>
								</span>
							</div>
						</li>
					</ul>
				</div>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" v-preventReClick @click="handleSubmit()">提 交</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { cloneDeep, concat } from 'lodash';
export default {
	data() {
		return {
			dialogVisible: false,
			webMenu: [],
			defaultProps: {
				children: 'childList',
				label: 'name'
			},
			checkedIds: [], //默认选中的菜单ID
			loadIds: [], //默认展开的菜单ID
			isStrictly: false, //父子不互相关联 默认为 false
			roleId: ''
		};
	},
	mounted() {
		this.$bus.$on('showDialogMenuPermission', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('showDialogMenuPermission');
	},
	methods: {
		async init(row) {
			this.roleId = row.id;
			let myMenu = JSON.parse(this.getSession('webMenu'));
			let menuIds = this.flatObj(myMenu).map(v => v.id);
			this.isStrictly = true;
			let res = await this.$store.dispatch('queryTbSysMenuTreeByRoleId', this.roleId);
			this.webMenu = this.setDisable(res.data, menuIds);
			let menu = cloneDeep(res.data);
			this.checkedIds = this.flatObj(menu)
				.filter(v => v.checked || v.isPublic == 1)
				.map(v => v.id);
			this.dialogVisible = true;
			setTimeout(() => {
				this.isStrictly = false;
			}, 1000);
		},
		//设置disable属性
		setDisable(data, ownIds) {
			data = data.filter(v => v.isDev != 1);
			if (data && data.length) {
				data.forEach(item => {
					let disabled = item.isPublic == 1 || !ownIds.includes(item.id);
					this.$set(item, 'disabled', disabled);
					this.setDisable(item.childList, ownIds);
				});
			}
			return data;
		},
		//提交
		async handleSubmit() {
			console.log('123123');
			let checkedArr = this.$refs.tree.getCheckedKeys();
			console.log(checkedArr);
			let halfCheckedArr = this.$refs.tree.getHalfCheckedNodes().map(v => v.id);
			let newArr = concat(checkedArr, halfCheckedArr).map(menuId => {
				return { roleId: this.roleId, menuId };
			});
			await this.$store.dispatch('menuAddBatchTbSysRole', newArr);
			this.successMsg('操作成功');
			this.dialogVisible = false;
		}
	}
};
</script>
<style scoped lang="scss">
.menu-permission {
	max-height: 500px;
	overflow-y: scroll;
}
.menu-item {
	border-bottom: 1px dashed #eee;
	.second-level {
		margin-left: 2em;
		.three-level {
			margin-left: 2em;
			background-color: #f5f5f5;
			padding: 10px;
			border-radius: 5px;
			span {
				margin-right: 20px;
			}
		}
	}
}
.dataJurisdiction_tree .el-tree {
	height: 450px;
	overflow-y: auto;
	border: 1px solid #dcdfe6;
}
</style>
